<template>
  <div class="search-input f-fs-c">
    <el-image
      style="width: 60px; height: 60px"
      :src="require('@/public/img/logo.jpg')"
      fit="fit"
    ></el-image>
    <div id="search-box">
      <input
        id="search-inp"
        type="search"
        list="list"
        placeholder="请输入搜索内容"
        @keyup.enter="toSearch"
      />
      <input id="search-btn" type="button" value="搜索" @click="toSearch" />
      <datalist id="list">
        <option v-for="item in 5" :key="item">{{ item }}</option>
      </datalist>
    </div>
  </div>
</template>
<script>
export default {
  name: "SearchBox",
  data() {
    return {};
  },
  methods: {
    toSearch() {
      console.log(this.$route.path)
      if(this.$route.path=="/search"){
        console.log("发起请求")
      }else{
        this.$router.push("/search");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.search-input{
    margin: 50px 0;
}
#search-box {
  width: 700px;
  height: 46px;
  border: 2px solid $theme-color;
  border-radius: 25px;
  overflow: hidden;
  margin-left: 100px;
  > input {
    width: 600px;
    height: 100%;
    border: none;
    padding: 0 20px;
    font-size: 18px;
    outline: none;
  }
  #search-btn {
    cursor: pointer;
    color: #ffffff;
    width: 100px;
    height: 100%;
    padding: 0;
    background: $theme-color;
    font-weight: bold;
    &:hover {
      background: $theme-color-hover;
    }
  }
}
</style>